<template>
  <div class="wapper">
    <div @click="show = true" class="value">
      <van-loading v-if="loading">加载中，请稍候...</van-loading>
      <template v-else>{{ text ? text : "请选择" }}</template>
    </div>

    <van-popup
      v-model="show"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body">
      <van-empty
        v-if="!loading && backup.length < 1"
        :image="require('@/assets/empty.svg')"
        description="暂无数据" />

      <van-picker
        v-else
        class="picker-wapper"
        ref="picker"
        value-key="text"
        visible-item-count="3"
        show-toolbar
        :loading="loading"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel">
        <template #title>
          <div class="title">
            <van-field
              v-model="keyword"
              center
              clearable
              label=""
              placeholder="请输入关键字">
            </van-field>
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
import { Picker, Popup, Loading, Empty, Field, Button } from "vant";
import { getMaterialSelect } from "@/api/base";
import { to } from "@/utils";

export default {
  name: "MaterialName",
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  model: {
    event: "change",
  },
  props: {
		value: {
      type: [String, Number],
      required: true,
    },
    materialType: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      keyword: "",
      columns: [],
      backup: [],
      show: false,
      loading: false,
      text: "",
      token: localStorage.getItem("tokenKey"),
			valueMirror: ""
    };
  },
  watch: {
		value: {
			handler(newVal, oldVal) {
				console.log('newVal',newVal)
				this.valueMirror = newVal;
				console.log('this.valueMirror',this.valueMirror)
			},
			immediate: true, // 立即执行
		},
    materialType:{
			handler(val) {
      if (val) {
				console.log('val',val)
        this.fetchColumns(val);
      }
		},
		immediate: true, // 立即执行
    },
    keyword(val) {
      this.columns = this.backup.filter((e) => e.text.includes(val));
    },

  },
  computed: {
    // valueMirror: {
    //   get: function () {
    //     return this.value;
    //   },
    //   set: function (val) {
    //     this.$emit("change", val);
    //   },
    // },
  },
  methods: {
    onConfirm({ value, text }) {
      this.valueMirror = value;
			this.$emit("change", value);
      this.text = text;
      this.$nextTick(() => (this.show = false));
    },
    onCancel() {
      this.show = false;
    },
    async fetchColumns(val) {
      var that = this;
      const queryParams = {
        pageModel: { Token: this.token, Search: [val || ""] },
      };
      this.loading = true;
      const [err, res] = await to(getMaterialSelect(queryParams));
      this.loading = false;
      if (!err) {
        var resObj = {
          id: "",
          no: null,
          text: "请选择",
          value: "",
        };

        var columnData = Array.isArray(res.Result) ? res.Result : [];
        columnData.unshift(resObj);
        this.backup = columnData;
        this.columns = columnData;
				if(this.valueMirror){
					this.text = this.columns.find((e) => e.value == this.valueMirror)?.text || "";
				}else{
					this.valueMirror = this.columns[0]?.value || "";
					this.text = this.columns[0]?.text || "";
					this.$emit("change", this.valueMirror);
				}
      }
    },
  },
  created() {
    // this.token = localStorage.getItem("tokenKey");
    // this.fetchColumns();
		setTimeout(() => {
		console.log('this.valueMirror',this.valueMirror)
			
		}, 3000);
		console.log('this.valueMirror',this.valueMirror)
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}
/deep/.van-popup--bottom {
  height: 50vh !important;
}

.title {
  /deep/ .van-field {
    padding: 0 10px;
  }
  /deep/ .van-field__button {
    font-size: 0;
  }
  /deep/ .van-field__control {
    border: 1px solid #ccc;
    padding: 0 10px;
    border-radius: 4px;
  }
}
</style>
